<template>
  <div class="makeups">
    <titles :title="variablesObject"></titles>
    <div
      class="imgSrc"
      v-if="variablesObject && variablesObject.bigImgList && variablesObject.bigImgList[0]"
    >
      <router-link to="">
        <img :src="variablesObject.bigImgList[0].imgUrl" alt />
      </router-link>
    </div>
    <lists :list="list" class="smallImg3"></lists>
  </div>
</template>
<script>
import titles from "./title";
import lists from "./list";
export default {
  components: {
    titles,
    lists
  },
  props: {
    variablesObject: {
      type: Object,
      default: () => {
        return {};
      }
    },
    list: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {};
  },
  methods: {},
  mounted() {}
};
</script>
<style lang="scss" scoped>
.makeups {
  width: 1200px;
  margin: 0 auto 30px;
  .imgSrc {
    width: 100%;
    height: 310px;
    margin-bottom: 10px;
    border: 1px solid #f0eeee;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>